import React from 'react';
import classNames from 'classnames';


export interface TabItemProps {
    itemKey: string | number;
    active?: boolean;
    title?: string | React.ReactNode;
    badge?: React.ReactNode;
    children?: React.ReactNode;
    style?: React.CSSProperties;
    onClick?: (key: string | number) => void;
}

const TabItem: React.FC<TabItemProps> = (props) => {
    const {
        itemKey,
        active,
        badge,
        title,
        children,
        style,
        onClick,
        ...rest
    } = props;

    console.log('TabItem', active);
    const renderContent = () => {
        if (children) {
            return children;
        }
        if (typeof title === 'string') {
            return (
                <>
                    {
                        badge && <div className='seal-tab-bar-item-badge'>{badge}</div>
                    }
                    <span className='seal-tab-bar-item-text'>{title}</span>
                </>
            )
        }
        return title
    }
    const handleClick = () => {
        if (itemKey === undefined || itemKey === null) return
        onClick?.(itemKey as string | number)
    }

    return (
        <div
            key={itemKey}
            className={classNames('seal-tab-bar-item', active && 'active' )}
            style={style}
            onClick={handleClick}
        >
            {
                renderContent()
            }
        </div>
    )
}

export default TabItem